<template>
	<view :key="refreshKey" style="padding-bottom: 200rpx;">
		<view class="project-tab" style="animation-duration: 2s;">
			<uv-tabs :list="projectTypes" keyName="dictItemName" lineColor="none" 
			:inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)',
				color:'#737373', 
				width:'50px',
				textAlign:'center',
				padding:'5rpx',
				borderRadius:'15rpx',
				transform: 'scale(1.05)'
			}" 
			:activeStyle="{
				color:'#192131', 
				width:'50px',
				textAlign:'center',
				padding:'5rpx',
				borderRadius:'15rpx',
				fontWeight: 'bold',
				transform: 'scale(1.05)',
				textDecoration: 'underline',
				textDecorationThickness: '3px', 
				textDecorationColor: '#293f85',
				textUnderlineOffset: '15rpx'
			}" :scrollable="false" :current="currentTab" @change="changeTab"></uv-tabs>
		</view>
		<view class="project" v-for="project in projects" :key="project.id" @click="projectDetailPage(project.id)" style="animation-duration: 2s;">
			<view class="project-name">
				<view v-show="!project.projectName.endsWith('IP')">{{ project.projectName }}</view>
				<view v-show="project.projectName.endsWith('IP')">{{ project.projectName.slice(0, -2) }}<text
						class="ip-highlight">IP</text></view>
			</view>
			<view class="project-scale-label">
				<!-- <image src="../../static/img/home/icon_xiangmu.png" mode="widthFix"></image> -->
			<view class="xmgm">
				<text>项目规模：</text>
				<text class="project-scale-value">{{ project.projectAmount }}万USDT</text>
			</view>
				<view class="project-scale-r">{{ project.rebateModeName }}</view>
			</view>
			<view class="project-pic">
				<!-- <image mode="widthFix" :src="project.mainPic"></image> -->
			</view>

			<view class="project-schedule">
				<view class="project-schedule-l">
					<text class="project-schedule-label">项目进度</text>
				</view>
				<view class="project-schedule-r">
					<uv-line-progress :percentage="project.projectSchedule" :showText="false" activeColor="#FFF9C3"
						height="12rpx" inactiveColor='#f7fbfa'></uv-line-progress>
				</view>
				<view class="project-schedule-value"><text>{{ project.projectSchedule }}%</text></view>

			</view>
			<view class="invest-info">
				<view class="list">
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{ project.term }}</view>
						<view class="invest-info-item-label">投资期限</view>
						<view class="invest-info-item-label2">（{{ project.timeUnit }}）</view>
					</view>
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{ project.rate }}%</view>
						<view class="invest-info-item-label">收益率</view>
						<view class="invest-info-item-label2">（%）</view>
					</view>
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{ project.singleTimeMinIncome }}</view>
						<view class="invest-info-item-label">每期收益</view>
						<view class="invest-info-item-label2">（USDT）</view>
					</view>
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{ project.minSubscribeAmount }}</view>
						<view class="invest-info-item-label">起购金额</view>
						<view class="invest-info-item-label2">（USDT）</view>
					</view>
				</view>

				<view class="project-invest-btn" @click="projectDetailPage(project.id)">马上投资</view>
			</view>
			<!-- <uv-gap height="1" bgColor="#888"></uv-gap> -->
		</view>
		<view class="no-data" v-show="noDataFlag" style="animation-duration: 2s;">
			<image src="/static/img/home/no_data.png"></image>
			<view class="content">
				<view class="text-title">即将上线</view>
				<view class="text">该功能即将上线，敬请期待！</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			projectTypes: [],
			currentTab: 0,
			projects: [],
			noDataFlag: false,
			refreshKey:0
		}
	},
	onLoad() {
		this.findProjectType();
	},
	onShow(){
		this.refreshKey += 1;
	},
	methods: {

		changeTab(tab) {
			this.currentTab = tab.index;
			this.findCanBuyProject();
		},

		findProjectType() {
			var that = this;
			uni.$uv.http.get('/dictconfig/findDictItemInCache', {
				params: {
					dictTypeCode: 'projectType'
				}
			}).then(res => {
				var tmpProjectTypes = res.data;
				var projectTypes = [];
				this.projectTypes = projectTypes.concat(tmpProjectTypes);
				that.findCanBuyProject();
			});
		},

		projectDetailPage(id) {
			uni.navigateTo({
				url: '../projectDetail/projectDetail?id=' + id
			});
		},

		findCanBuyProject() {
			var that = this;
			uni.$uv.http.get('/financialProject/findCanBuyProject', {
				params: {
					projectType: that.projectTypes[that.currentTab].dictItemCode,
				}
			}).then(res => {
				that.projects = res.data;
				that.noDataFlag = that.projects.length == 0;
			});
		},
	}
}
</script>

<style scoped lang="less">
page {
	background: url('/static/img/my_bg2.png') no-repeat;
	background-size: 100% 450rpx;
	background-color: #e9ebff
}

.no-data {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 750rpx;
		height: 540rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 100rpx;
		.text-title{
			font-size: 44rpx;color: #000;letter-spacing: 2px;margin-bottom: 32rpx;
		}
		.text{
			font-size: 28rpx;color: hwb(0 40% 58%);
		}
	}
}

.invest-info {
	background: rgba(233, 230, 221, 0.2);
	padding: 28rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 1px solid #FFF;
	.list {
		display: flex;
		justify-content: space-between;
	}
}

.invest-info-item {
	flex: 1;
	text-align: center;
}

.invest-info-item-label {
	font-size: 22rpx;
	color: #FFF;
	padding-bottom: 4rpx;
}

.invest-info-item-label2 {
	font-size: 22rpx;
	color: #FFF;
}

.invest-info-item-value {
	font-size: 28rpx;
	padding-bottom: 12rpx;
	color: #E4D494;
	font-weight: bold;
}

.project {
	background: url(/static/img/xmbg.png);
	background-size: 100% 100%;
	border-radius: 20rpx;
	padding: 20rpx;
	padding-top: 28rpx;
	box-sizing: border-box;
	width: 90%;
	margin: 0 auto;
	margin-top: 40rpx;
}

.project-scale-value {}

.project-name {
	font-size: 34rpx;
	font-weight: bold;
	color: #FFF;
	padding: 10rpx 0px;
	text-align: left;
}

.project-scale-label {
	display: flex;
	align-items: center;
	font-size: 22rpx;
	color: #FFF;
.xmgm{
	background: rgba(228, 212, 148, 0.1);
	padding: 8rpx 16rpx;
}


	image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
}

.project-scale-l {
	flex: 1;
	padding-right: 64rpx;
	font-size: smaller;
}

.project-scale-r {
	font-size: 20rpx;
	background: rgba(228, 212, 148, 0.1);
	color: #E4D494;
	padding: 8rpx 16rpx;
	margin-left: 20rpx;
}

.project-pic {
	width: 100%;
	border-radius: 20rpx;
	overflow: hidden;
	margin-top: 20rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.project-schedule {
	display: flex;
	align-items: center;
	height: 90rpx;

	.project-schedule-label {
		padding-right: 16rpx;
		color: #FFF;
	}

}

.project-schedule-value {
	color: rgba(228, 212, 148, 1);
	font-weight: bold;
	font-size: 28rpx;
	margin-left: 22rpx;
}

.project-schedule-l {
	font-size: smaller;
	flex-grow: 0;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.40);
}

.project-schedule-r {
	flex: 1;


}

.project-invest-btn {
	width: 100%;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	margin-top: 28rpx;
	background:#F9C25F;
	border-radius: 34rpx;
	color: #FFF;
	font-weight: 600;
}

.project-tab {
	padding-bottom: 16rpx;
	padding-top: 150rpx;

}

/deep/ .uv-line-progress__line {
	background: linear-gradient(270deg, #FFB637 0%, #FFF9C3 100%) !important;
}

</style>